<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loving0606个人主页</title>
    <link rel='stylesheet' href='css/index.css'>
</head>

<body>
    <div id='app'>
        <!--头部-->
        <header id='header'>
            <section class="headerMain">
                <h1>loving0606个人主页</h1>
                <nav class="nav">
                    <ul class="clearfix">
                        <li>
                            <a href="javascript:;">
                                <div class="up"><img src='css/img/home_gruen.png'></div>
                                <div class="down"><img src='css/img/home.png'></div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">作品展示</div>
                                <div class="down">作品展示</div>
                                <!-- <div class="up">about</div>
                                <div class="down">about</div> -->
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">个人简历</div>
                                <div class="down">个人简历</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">联系我</div>
                                <div class="down">联系我</div>
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="arrow">
                    <div class="arrow1"></div>
                    <div class="arrow2"></div>
                </div>
            </section>
        </header>
        <!--内容域---->
        <div id='content'>
            <!----右侧导航栏-->
            <ul class="menubar">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul class="list">
                <li class="home">
                    <div>
                        <ul class="homeList">
                        </ul>
                    </div>
                </li>
                <li class="works">
                    <div>
                        <ul class="worksList">
                        </ul>
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <script>
        window.onload = function() {
            //获取头部元素
            var header = document.getElementById('header')
            var liNodes = document.querySelectorAll('#header .headerMain .nav ul li')
            var upNodes = document.querySelectorAll('#header .headerMain .nav ul li .up')
            var arrow = document.querySelector('#header .headerMain .arrow')

            var content = document.getElementById('content');
            var contentLi = document.querySelectorAll('#content .list>li')
            var contentList = document.querySelector('#content .list')
                //侧边导航
            var menuList = document.querySelectorAll('#content .menubar li')
                //li索引下标
            var now = 0;
            //li之前屏幕索引值
            var preIndex = 0;
            //定时器
            var timer = null;

            //设置内容区域高度
            contenBind()
                /////
            function contenBind() {
                content.style.height = document.documentElement.clientHeight - header.offsetHeight + 'px'
                for (var i = 0; i < contentLi.length; i++) {
                    contentLi[i].style.height = document.documentElement.clientHeight - header.offsetHeight + 'px'
                }
            }
            //滚动
            //if  chrome
            document.onmousewheel = function(event) {

                    clearTimeout(timer)
                    timer = setTimeout(function() {
                        fun(event)
                    }, 200)
                }
                //firefox
            if (document.addEventListener) {
                document.addEventListener('DOMMouseScroll', function(event) {
                    clearTimeout(timer)
                    timer = setTimeout(function() {
                        fun(event)
                    }, 200)
                })
            }

            function fun(event) {

                event = event || document.event;
                var flag = '';
                if (event.wheelDelta) {
                    if (event.wheelDelta > 0) {
                        flag = 'up'
                    } else {
                        flag = 'down'
                    }
                } else if (event.detail) {
                    if (event.detail > 0) {
                        flag = 'down'
                    } else {
                        flag = 'up'
                    }
                }
                preIndex = now
                    // alert(flag)
                    // alert(now)
                    // alert(preIndex)
                if ((preIndex == 0 && flag == 'up') || (preIndex == (liNodes.length - 1) && flag == 'down')) {
                    return
                }
                switch (flag) {
                    case 'up':
                        if (now > 0) {
                            now--;
                        }
                        move(now)
                        break;
                    case 'down':
                        if (now < liNodes.length - 1) {
                            now++
                        }
                        move(now)
                        break;
                }
                event.preventDefault && event.preventDefault()

                return false;
            }
            //
            function move(now) {
                for (var j = 0; j < upNodes.length; j++) {
                    upNodes[j].style.width = ''
                }
                upNodes[now].style.width = '100%'
                    //屏幕滚动
                contentList.style.top = -now * (document.documentElement.clientHeight - header.offsetHeight) + 'px'
                    //侧边导航
                for (var i = 0; i < menuList.length; i++) {
                    menuList[i].className = ''
                }
                menuList[now].className = 'active'

            }

        }
    </script>
</body>

</html>